<template>
  <div class="nav flexS">
    <div class="left" @click="show = true"><SvgIcon name="sort"></SvgIcon> </div>
    <div class="center"><CurrentYear /></div>
    <div class="right" @click="jump('/searchList')"><SvgIcon name="search"></SvgIcon> </div>
  </div>
  <!-- 占位 -->
  <div class="slot"></div>
  <van-popup v-model:show="show" position="left"><DrawerDetailVue /></van-popup>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import SvgIcon from '@comp/SvgIcon/index.vue'
  import CurrentYear from '@comp/CurrentYear/CurrentYear.vue'
  import DrawerDetailVue from '@comp/DrawerDetail/DrawerDetail.vue'
  // 创建路由实例
  const router = useRouter()
  const jump = (path: string) => router.push(path)
  // 抽屉显隐藏
  const show = ref<boolean>(false)
</script>
<style lang="scss" scoped>
  .nav {
    height: $nav-height;
    background-color: black;
    box-sizing: border-box;
    color: white;
    padding: 0 10px;
    font-size: $nav-fontSize;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
  }

  .slot {
    height: $nav-height;
  }
</style>
<style lang="scss">
  .van-popup {
    height: 100%;
    width: 55%;
  }
</style>
